import React from 'react'
import { Button, Row, Col, Card, Typography, Layout, Icon, Divider } from 'antd'
import { stringify } from 'qs'
import { withI18n, Trans } from '@lingui/react'
import { connect } from 'dva'
import { router } from 'utils'
import { Page } from 'components'
import Projectslist from './components/Projectslist'
const { Paragraph, Title } = Typography
const { Content } = Layout

@withI18n()
@connect(({ workers, app, loading }) => {
  const { isMobile } = app
  return { workers, isMobile, loading }
})
class workers extends React.Component {
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({ type: 'workers/workergetAllProject' })
  }
  render() {
    const { workers, isMobile, location, dispatch, loading } = this.props
    const { choosedproject, projects } = workers
    const { query, pathname } = location

    const handleRefresh = newQuery => {
      router.push({
        pathname,
        search: stringify(
          {
            ...query,
            ...newQuery,
          },
          { arrayFormat: 'repeat' }
        ),
      })
    }
    // console.log('choosedproject:' + choosedproject)
    const projectslistProps = {
      isMobile,
      projectloading: loading.effects[`workers/workergetAllProject`],
      projectaddloading: loading.effects[`devices/newproject`],
      projectrenameloading: loading.effects[`devices/projectrename`],
      projects,
      choosedproject,
      onChangeProjectName: (str, item) => {},
      onClickProject: (e, item, choosed) => {
        if (choosed) return
        handleRefresh({
          workerproject: item.objectId,
        })
      },
      onRefresh: () => {
        dispatch({ type: 'workers/workergetAllProject' })
      },
      onNewProject: str => {},
      onDeleteProject: item => {},
    }
    return (
      <Page inner>
        {/* <Title
          level={4}
          style={{ display: 'inline-block', marginRight: '10px', marginLeft: 10 }}
        >
          <Trans>Equipment input</Trans>:
        </Title>
        <Divider style={{ marginTop: 0, marginBottom: 5 }} /> */}
        <Layout style={{ padding: '0px 0', background: '#fff' }}>
          <Projectslist {...projectslistProps} />
          <Content style={{ padding: '0 0px' }} />
        </Layout>
      </Page>
    )
  }
}

export default workers
